<template>
  <view class="min-h-screen bg-[#f8f9fb] p-4">
    <!-- 页面标题 -->
    <view class="mb-4">
      <text class="text-xl font-bold">报修历史记录</text>
      <text class="block text-sm text-gray-500 mt-1"
        >以下是您的报修申请记录</text
      >
    </view>

    <!-- 历史记录列表 -->
    <view v-for="(item, index) in records" :key="index" class="mb-4">
      <view class="bg-white rounded-2xl shadow p-4">
        <view class="text-base font-semibold text-gray-800 mb-1">
          {{ item.repair_type }}
        </view>
        <view class="text-sm text-gray-500 mb-1">
          户号：{{ item.house_name }}
        </view>
        <view class="text-sm text-gray-500">
          时间：{{ dayjs(item.appointment_time).format('YYYY-MM-DD HH:mm:ss') }}
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view
      v-if="records.length === 0"
      class="flex flex-col items-center mt-20 text-gray-400"
    >
      <wd-icon name="file-text" size="40" />
      <text class="mt-2">暂无报修记录</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getRepire } from '@/api/repiar'
import useStore from '@/store'
import dayjs from 'dayjs'

const { useUser } = useStore()

// 模拟报修历史记录
const records = ref<IRepairDetail[]>([])

onShow(async () => {
  const res = await getRepire<IPaginationParams, IRepairDetail>({
    user_id: useUser.getUser.id || '',
    page: 1,
    pageSize: 100
  })
  if (res.code === 200) {
    records.value = res.data.items || []
  }
})
</script>
